// src/views/editor/Braft.tsx
import 'braft-editor/dist/index.css'
import BraftEditor, { EditorState } from 'braft-editor'
import { useState } from 'react'
type BraftProps = {}

export const Braft = (props: BraftProps) => {
    const [editorState, setEditirState] = useState<EditorState>(BraftEditor.createEditorState('<div></div>'))
    const handleChange = (editorState: EditorState) => {
        console.log(editorState)
        setEditirState(editorState)
    }
    return (
        <>
            <h1>富文本编辑器</h1>
            <BraftEditor
                style={{ width: '100%', height: 400 }}
                value={editorState}
                onChange={handleChange}
            />
            <hr />
            {
                // 将此数据 存放于数据库
                editorState.toHTML()
            }
            <div>预览</div>
            {/* 从数据库提取出来以此种方法渲染 */}
            <div dangerouslySetInnerHTML={{ __html: editorState.toHTML() }}></div>
        </>
    );
}